<template>
  <section>
    <!--头部 start-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="filters" style="">
        <el-form-item label="规格名称" prop="">
          <el-input  size="small" @keyup.native="handleList" v-model="filters.option_name" :maxlength="20" placeholder="请输入规格名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addList">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="default">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--头部 end-->

    <!--数据列表展示 start-->
    <el-col>
      <el-table
              ref="multipleTable"
              :data="goodsOptions"
              tooltip-effect="dark"
              v-loading="listLoading"
              style="width: 100%"
             >
        <el-table-column
                type="selection"
                align="center"
                width="100">
        </el-table-column>
        <el-table-column
                label="规格名称"
                align="center"
                width="150">
          <template slot-scope="scope">{{ scope.row.option_name }}</template>
        </el-table-column>
        <el-table-column
                prop="name"
                label="规格子项"
                align="center"
                width="200">
          <template slot-scope="scope">{{ scope.row.option_value }}</template>
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="editList(scope.row.option_id)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="deleteList(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <!--数据列表展示 end-->

    <!--分页 start-->
    <el-col class="toolbar">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="filters.page"
              :page-size="filters.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </el-col>
    <!--分页 end-->

    <!--新增列表 start-->
    <el-col>

    </el-col>
    <!--新增列表 end-->

  </section>
</template>

<script>

  import { getSpecialList,editSpecialList,deleteSpecialList } from '../../api/api'

  export default {
     data () {
         return {
             //默认是没有加载效果
             listLoading: false,
             filters: {
               //默认第一页
               page: 1,
               //默认每页是10条数据
               pageSize: 10,
               //前台向后台传递的字段
               option_name: ''
             },
             total: '',
             //用于接收后台返回的数据
             goodsOptions: [],
             visible: {
                 //默认编辑页面是关闭的
                 editForm: false,
                 //默认新增页面是关闭的
                 addForm: false,
             }

         }
     },
     methods: {
         //分页
         handleCurrentChange(val) {
             this.filters.page=val;
             this.handleList();
//             console.log("当前页:"+val);
         },
         //获取列表
         handleList(){
             //开启加载效果
             this.listLoading=true;
             getSpecialList(this.filters).then((res)=>{
                //获取数据后，结束加载效果
                 this.listLoading=false;
                 console.log(res);
                 this.goodsOptions=res.data;
//                 this.filters.page=res.currentPage;
                 this.total=res.totalCount;

             })
         },
         //新增
         addList(){

         },
         //编辑
         editList(){
             editSpecialList().then((res)=>{

             })
         },
         //删除
         deleteList(row){
             this.$confirm("您确定删除"+row.option_name+"吗？","提示",{
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(()=>{
                 deleteSpecialList(row.option_id).then((res)=>{
                    console.log(res);
                    if(parseInt(res.status)==1){
                        this.handleList();
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    }else{
                        this.$alert("删除失败", "失败", {type: "error"});
                    }
                 });

             })
         }

     },
    mounted (){
        this.handleList();
    }
  }

</script>


<style scoped>

</style>